<?php
/*
  Template Name: Product Listing Page
 */
?>
<?php
get_header();
global $Product, $Cart;
?>
<!--
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js"></script>
-->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/filterable.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/paging.js"></script>

<?php get_header(); ?>
<div id="page" class="clearfix">

     <div id="content" class="full_width">



          <?php
          if (have_posts())
          {
               ?>

               <div id="portfolio">
                    <h1 class="head"><?php single_cat_title(); ?></h1>
                    <div id="page_navigation">
                         <span id="left"></span>
                         <span id="right"></span>
                    </div>
                    <ul id="portfolio-filter">
                         <li>
                              <a ref ="all"href="#All" class="current">All</a>
                         </li>
                         <?php
                         $category = $wp_query->get_queried_object();
                         $terms = get_term_children($category->term_id, 'category');
                         foreach ((array) $terms as $term): $term = get_term_by('id', $term, 'category');
                              ?>
                              <li>
                                   <a ref="<?php echo $term->slug; ?>" href="#<?php echo $term->slug; ?>"><?php echo $term->name; ?></a>
                              </li>
                         <?php endforeach; ?>
                    </ul>


                    <ul id="portfolio-list" style="display: block;" class="display thumb_view">
                         <?php
                         while (have_posts())
                         {
                              the_post();
                              $data = get_post_meta($post->ID, 'key', true);
                              $product_price = $Product->get_product_price($post->ID);
                              ?>
                              <li class="portfolio-entry <?php
                    $category = get_the_category();
                    echo strtolower($category[0]->cat_name);
                              ?>">

                                   <div class="entry-thumb">
                                        <a href="<?php the_permalink() ?>" class="product_thumb">
                                             <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $data['productimage']; ?>&amp;w=161&amp;zc=1&amp;q=80<?php echo $thumb_url; ?>" alt=""  />
                                        </a>
                                        <span class="extra"></span>
                                   </div><!-- end .entry-thumb -->

                                   <div class="entry-title">
                                        <span>
                                             <?php
                                             $category = get_the_category();
                                             echo $category[0]->cat_name;
                                             ?>
                                        </span>
                                        <a href="<?php the_permalink() ?>">
                                             <?php the_title(); ?>
                                        </a>
                                   </div><!-- end .entry-title -->
                                   <a href="<?php the_permalink() ?>" class="more-link"></a>

                              </li>
                              <?php
                         }
                         ?>
                    </ul>

                    <div class="clearfix"></div>

                    <div class="pagination">
                         <div class="Navi">
                              <?php if (function_exists('wp_pagenavi'))
                              { ?>
                                   <?php wp_pagenavi(); ?>
                              <?php } ?>
                         </div>
                    </div>
               <?php } ?>
          </div><!-- end #portfolio -->
     </div> <!-- content #end -->


</div> <!-- page #end -->

<?php get_footer(); ?>
<script type="text/javascript">
     $(document).ready(function() {
          $('.portfolio-entry').hover(function(){
               $('.extra', this).css({'display':'inline','opacity':'0.8'});
               h = jQuery('.entry-title', this).outerHeight();
               jQuery('.entry-title', this).stop().css({top: '-' + h + 'px', visibility: 'visible'}).animate({top:'0'}, 'easeInCubic');
               jQuery('.more-link', this).animate({bottom:'-10px'}, 'easeInCubic');
               if(!(jQuery.browser.msie && jQuery.browser.version < 9)) // exclude ie8- because of their poor support for png
                    jQuery('.extra', this).delay(100).fadeIn('easeInCubic');
          },function() {
               $('.extra', this).css({'display':'none','opacity':'0.8'});
               h = jQuery('.entry-title', this).outerHeight();
               jQuery('.entry-title', this).stop().animate({top: '-' + h + 'px'}, 'easeOutCubic');
               jQuery('.more-link', this).animate({bottom:'-40px'}, 'easeOutCubic');
               if(!(jQuery.browser.msie && jQuery.browser.version < 9)) // exclude ie8- because of their poor support for png
                    jQuery('.extra', this).fadeOut('easeOutCubic');
          });
     });
</script>
